<template>
  <div class="main_box">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <el-form :model="hospitalForm" ref="hospitalForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="医院头像" class="img_item" prop="hospitalImageUrl">
            <upload-img class="upload-avator" @uploadFileList="getImageUrl" folder="hospital">
              <img v-if="hospitalForm.hospitalImageUrl"  width="100%" height="100%"  style="objectFit: cover" :src="hospitalForm.hospitalImageUrl" alt="">
              <div class="tip" v-if="!hospitalForm.hospitalImageUrl">
                <i  class="el-icon-plus" ></i>
              </div>
            </upload-img>
            <!-- <div class="img photo">
            <img :src="hospitalForm.hospitalImageUrl" v-if="hospitalForm.hospitalImageUrl"/>
            <i class="el-icon-plus" v-if="!hospitalForm.hospitalImageUrl"></i>
          </div> -->
            <div class="txt photo_txt">
              <span>图片请小于5M（jpg、png、bmp）</span>
            </div>
            <!-- <el-input type="file" @change="handleFile('hiddenfile', 'hospitalImageUrl')" id="hiddenfile"
              class="file photo_input"></el-input> -->
          </el-form-item>

          <el-form-item label="医院名称" prop="hospitalName">
            <el-input v-model="hospitalForm.hospitalName" @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="医院类型" prop="hospitalType">
            <el-select v-model="hospitalForm.hospitalType" placeholder="请选择医院类型">
              <el-option v-for="item in hospitalTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="医院简称" prop="hospitalShortName">
            <el-input v-model="hospitalForm.hospitalShortName" @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="关联商户" prop="businessId">
            <el-select v-model="hospitalForm.businessId" placeholder="请选择关联商户">
              <el-option v-for="item in businessList" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="营业时间" prop="businessHours">
            <el-input v-model="hospitalForm.businessHours"></el-input>
          </el-form-item>

          <!-- <el-form-item label="是否需要结果提醒" prop="isRemind">
            <el-switch v-model="hospitalForm.isRemind" active-color="#13ce66" active-value="1" inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="影像预约是否需要支付" prop="isAppointPay">
            <el-switch v-model="hospitalForm.isAppointPay" active-color="#13ce66" active-value="1" inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否添加报告单编号" prop="addHeaderFlag">
            <el-switch v-model="hospitalForm.addHeaderFlag" active-color="#13ce66" active-value=true inactive-value=false>
            </el-switch>
          </el-form-item>
          <el-form-item label="核酸支付方式" prop="isHsPay">
            <el-select v-model="hospitalForm.isHsPay" placeholder="请选择核酸支付方式">
              <el-option v-for="item in payTypeList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item> -->
          <!--<el-form-item label="医院类型" prop="classifyId">
          <ClassifyRegion :classifyValues="hospitalForm.classifyId" @classifyRegionChange="handleClassifyChange"></ClassifyRegion>
        </el-form-item>-->
        </el-row>

        <el-row>
          <el-form-item label="所在地区" prop="addressList">
            <Address :addressList="hospitalForm.addressList" @getAddress="getAddress"></Address>
          </el-form-item>
          <el-form-item label="详细地址" prop="hospitalAddress"> <!-- class="location_item"-->
            <el-col> <!--:span="11"-->
              <el-input v-model="hospitalForm.hospitalAddress" @keydown.native="keydown($event)"></el-input>
            </el-col>
            <!--<el-col :span="1">&nbsp;</el-col>-->
          </el-form-item>

          <!-- <el-form-item label="关联医检机构(可多选)" prop="institutionRelation">
            <el-select v-model="hospitalForm.institutionRelation" filterable clearable reserve-keyword
              :loading="loadingIns" placeholder="请选择医检机构" multiple>
              <el-option v-for="item in pickInstitutionList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="医院介绍" prop="hospitalIntroduce">
            <el-input type="textarea" v-model="hospitalForm.hospitalIntroduce"></el-input>
          </el-form-item>
          <!-- <el-table :data="hospitalForm.discountList">
            <el-table-column type="index" label="序号" align="center" width="200"></el-table-column>
            <el-table-column prop="institutionName" label="医检机构名称" align="center" ></el-table-column>
            <el-table-column prop="discount" label="折扣说明" align="center">
              <template slot-scope="{row}">
                <el-input  v-model="row.discount"></el-input>
              </template>
            </el-table-column>
          </el-table> -->
        </el-row>

        <el-row>
          <el-form-item label="联系人姓名" prop="contactsName">
            <el-input v-model="hospitalForm.contactsName" @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="联系人职称" prop="contactsTitle">
            <el-input v-model="hospitalForm.contactsTitle" @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="联系人手机号" prop="contactsTel">
            <el-input type="number" @change="changeTel" v-model="hospitalForm.contactsTel"></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱" prop="contactsEmail">
            <el-input @change="changeEmail" v-model="hospitalForm.contactsEmail"></el-input>
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item label="营业执照" prop="license">
            <upload-img class="upload-img" @uploadFileList="getLicense" folder="hospital">
              <img v-if="hospitalForm.license" width="100%" :src="hospitalForm.license" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!hospitalForm.license"></i>
                <div v-if="!hospitalForm.license" class="el-upload__text">将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
          <el-form-item label="资质证书" prop="qualificate">
            <upload-img class="upload-img" @uploadFileList="getQualUrl" folder="hospital">
              <img v-if="hospitalForm.qualificate" width="100%"
                :src="hospitalForm.qualificate" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!hospitalForm.qualificate"></i>
                <div v-if="!hospitalForm.qualificate" class="el-upload__text">将图片拖到此处，或<em>点击上传</em>
                </div>
              </div>
            </upload-img>
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-form-item>
            <el-button plain type="primary" :disabled="disabledBtn" @click="sureHospitalClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import Region from "@/components/Region";
import HospitalApi from "@/api/institution/hospital"
// import InstitutionApi from "@/api/institution/institution";
import UploadImg from "../../components/UploadImg.vue";
import Address from "../../components/Address.vue";
import BusinessApi from "@/api/business/business"
export default {
  data() {
    return {
      hospitalForm: {
        hospitalId: "",
        hospitalName: "",
        hospitalShortName: "",
        businessHours: "",
        businessId:"",
        // isRemind: "0",
        // isHsPay: 0,
        // isAppointPay: "0",
        addressList: [],
        provinceId: "",
        cityId: "",
        areaId: "",
        provinceName: "",
        cityName: "",
        areaName: "",
        // institutionRelation: [],
        // discountList:[],
        hospitalAddress: "",
        hospitalIntroduce: "",
        hospitalImageUrl: "",
        contactsName: "",
        contactsTel: "",
        contactsTitle: "",
        contactsEmail: "",
        // addHeaderFlag: false,
        hospitalType: "",
        license:"",
        qualificate:"",
      },
      disabledBtn: false,
      loadingIns: false,
      tradeArea: [],
      pickHospitalList: [],
      pickInstitutionList: [],
      props: {
        value: 'areaId',
        label: 'areaName'
      },
      hospitalClassify: [],
      //1.合作医院 2.其他医院
      hospitalTypeList: [
        { label: "合作医院", value: 1 },
        { label: "其他医院", value: 2 }
      ],
      payTypeList: [
        { label: "月结", value: 0 },
        { label: "预约付款", value: 1 },
        { label: "采样付款", value: 2 }
      ],
      roleRules: {
        hospitalName: [
          { required: true, message: "请输入医院名称", trigger: "blur" },
          { max: 30, message: '长度不超过30个字', trigger: 'blur' }
        ],
        /*classifyId: [
          { required: true, message: "请选择医院类型", trigger: "change" }
        ],*/
        hospitalShortName: [
          { required: true, message: "请输入医院简称", trigger: "blur" },
          { max: 20, message: '长度不超过20个字', trigger: 'blur' }
        ],
        /*hospitalEstablishDate: [
          {  required: true, message: "请选择成立时间", trigger: "change" }
        ],*/
        hospitalType: [
          { required: true, message: "请选择医院类型", trigger: "change" }
        ],
        addressList: [
          { required: true, message: "请选择所在区", trigger: "change" }
        ],
        /*tradeAreaId: [
          { required: true, message: "请选择所在商圈", trigger: "change" }
        ],*/
        hospitalAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        /*longitude: [
          { required: true, message: "请输入经度", trigger: "blur" }
        ],
        latitude: [
          { required: true, message: "请输入经度", trigger: "blur" }
        ],*/
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
          { max: 15, message: '长度不超过30个字', trigger: 'blur' }
        ],
        contactsTitle: [
          { required: true, message: "请输入联系人职称", trigger: "blur" },
          { max: 15, message: '长度不超过30个字', trigger: 'blur' }
        ],
        contactsTel: [
          { validator: this.$Utils.elIsPhone, trigger: "blur", required: true }
        ],
        // license:[
        //   { required: true, message: "请选择图片" }
        // ],
        // qualificate:[
        //   { required: true, message: "请选择图片" }
        // ],
      },
      businessList:[],
    }
  },
  components: {
    Region,
    UploadImg,
    Address
  },
  // watch:{
  //   "hospitalForm.institutionRelation":{
  //       handler(){
  //           let {hospitalForm:{institutionRelation,discountList},pickInstitutionList} =  this

  //           discountList = discountList.filter(item=>institutionRelation.some(item2=>item2==item.institutionId))

  //           institutionRelation.forEach(item=>{
  //             if(!discountList.some(item2=>item==item2.institutionId)){
  //               discountList.push({
  //                 institutionId:item,
  //                 institutionName:pickInstitutionList.find(item2=>item2.value==item).label,
  //                 discount:"",
  //               })
  //             }
  //           })
  //           this.hospitalForm.discountList = discountList
  //       }
  //     }
  // },
  methods: {
    init() {
      // this.listInstitution();

      if (this.$route.query.id) {
        this.hospitalForm.hospitalId = this.$route.query.id
        this.getData()
      }
      this.getBusinessList()
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    getData() {
      HospitalApi.getHospital({ id: this.$route.query.id })
        .then(res => {
          this.$Utils.bindingBean(this.hospitalForm, res.data);
          this.hospitalForm.addressList = [this.hospitalForm.provinceId,
          this.hospitalForm.cityId,
          this.hospitalForm.areaId]
          this.hospitalForm.provinceName,
          this.hospitalForm.cityName,
          this.hospitalForm.areaName;
          this.hospitalForm.hospitalType = parseInt(res.data.hospitalType);
        })
    },
    getBusinessList() {
        BusinessApi.listIdNameVo({hospitalId:this.hospitalForm.hospitalId||0}).then(res => {
            this.businessList = res.data
        })
    },
    getImageUrl(val){
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
        this.hospitalForm.hospitalImageUrl = val[0]
      }

    },
    getLicense(val) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
        this.hospitalForm.license = val[0]
      }
    },
    getQualUrl(val) {
      if (val.length > 0) {
        this.$Utils.notifySuccess("上传成功");
        this.hospitalForm.qualificate = val[0]
      }

    },
    changeTel(val) {
      // 联系人手机号号码 校验合法性
      if (this.$Utils.isMobile(val)) {
        this.disabledBtn = false
      } else {
        this.$Utils.messageError("手机号码格式错误")
        this.disabledBtn = true
      }
    },
    changeEmail(val) {
      // 联系人手机号号码 校验合法性
      if (this.$Utils.isEmptyObject(val)) {
        this.disabledBtn = false
      } else {
        if (this.$Utils.isEmail(val)) {
          this.disabledBtn = false
        } else {
          this.$Utils.messageError("邮箱格式错误")
          this.disabledBtn = true
        }
      }
    },
    sureHospitalClick() {
      this.$refs.hospitalForm.validate(valid => {
        if (valid) {
          this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
            .then(() => {
              if (this.hospitalForm.hospitalId) {
                this.editHospital();
              } else {
                this.addHospital();
              }
            });
        }
      })
    },
    addHospital() {
      let hospitalData = {
        hospitalName: this.hospitalForm.hospitalName,
        hospitalShortName: this.hospitalForm.hospitalShortName,
        businessHours: this.hospitalForm.businessHours,
        // isRemind: parseInt(this.hospitalForm.isRemind),
        // isHsPay: parseInt(this.hospitalForm.isHsPay),
        // isAppointPay: parseInt(this.hospitalForm.isAppointPay),
        hospitalType: this.hospitalForm.hospitalType,
        businessId:this.hospitalForm.businessId,
        // institutionRelation: this.hospitalForm.discountList.map(item=>({institutionId:item.institutionId,discount:item.discount})),
        provinceId: this.hospitalForm.provinceId,
        cityId: this.hospitalForm.cityId,
        areaId: this.hospitalForm.areaId,
        provinceName: this.hospitalForm.provinceName,
        cityName: this.hospitalForm.cityName,
        areaName: this.hospitalForm.areaName,
        hospitalAddress: this.hospitalForm.hospitalAddress,
        hospitalIntroduce: this.hospitalForm.hospitalIntroduce,
        hospitalImageUrl: this.hospitalForm.hospitalImageUrl,
        contactsName: this.hospitalForm.contactsName,
        contactsTel: this.hospitalForm.contactsTel,
        contactsTitle: this.hospitalForm.contactsTitle,
        // addHeaderFlag: this.hospitalForm.addHeaderFlag,
        contactsEmail: this.hospitalForm.contactsEmail,
        license:this.hospitalForm.license,
        qualificate:this.hospitalForm.qualificate
      };
      HospitalApi.addHospital(hospitalData)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    editHospital() {
      let hospitalData = {
        hospitalId: this.$route.query.id,
        hospitalName: this.hospitalForm.hospitalName,
        businessId:this.hospitalForm.businessId,
        hospitalShortName: this.hospitalForm.hospitalShortName,
        businessHours: this.hospitalForm.businessHours,
        // isRemind: parseInt(this.hospitalForm.isRemind),
        // isHsPay: parseInt(this.hospitalForm.isHsPay),
        // isAppointPay: parseInt(this.hospitalForm.isAppointPay),
        // institutionRelation: this.hospitalForm.discountList.map(item=>({institutionId:item.institutionId,discount:item.discount})),
        provinceId: this.hospitalForm.provinceId,
        cityId: this.hospitalForm.cityId,
        areaId: this.hospitalForm.areaId,
        provinceName: this.hospitalForm.provinceName,
        cityName: this.hospitalForm.cityName,
        areaName: this.hospitalForm.areaName,
        hospitalAddress: this.hospitalForm.hospitalAddress,
        hospitalIntroduce: this.hospitalForm.hospitalIntroduce,
        hospitalImageUrl: this.hospitalForm.hospitalImageUrl,
        contactsName: this.hospitalForm.contactsName,
        contactsTel: this.hospitalForm.contactsTel,
        contactsTitle: this.hospitalForm.contactsTitle,
        contactsEmail: this.hospitalForm.contactsEmail,
        // addHeaderFlag: this.hospitalForm.addHeaderFlag,
        hospitalType: this.hospitalForm.hospitalType,
        license:this.hospitalForm.license,
        qualificate:this.hospitalForm.qualificate
      };
      HospitalApi.editHospital(hospitalData)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    cancelHospitalClick() {
      this.returnList();
    },
    // listInstitution() {
    //   let _this = this
    //   _this.loadingIns = true
    //   let cond = {
    //     institutionType: 1
    //   }
    //   InstitutionApi.getInstitutionNameList(cond)
    //     .then(res => {
    //       setTimeout(() => {
    //         _this.loadingIns = false
    //         _this.pickInstitutionList = res.data.map(item => {
    //           return {
    //             value: item.institutionId,
    //             label: item.institutionName
    //           }
    //         })
    //       }, 200)
    //     })
    //     .catch(error => {
    //       _this.pickInstitutionList = []
    //       console.error(error)
    //     })
    // },
    getAddress(val) {
      this.hospitalForm.provinceId = val.provinceId;
      this.hospitalForm.provinceName = val.provinceName;
      this.hospitalForm.cityId = val.cityId;
      this.hospitalForm.cityName = val.cityName;
      this.hospitalForm.areaId = val.areaId;
      this.hospitalForm.areaName = val.areaName;
      this.hospitalForm.addressList = [val.provinceId, val.cityId, val.areaId];
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/institu/hospitalManagement' });
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style scoped lang="scss">
.upload-avator{
 width: fit-content;
 display: inline-block;
  &::v-deep .el-upload-dragger{
    width: 120px !important;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid rgb(197, 193, 193);
    background-color: #f7f7f7;
    .tip {
        font-size: 38px;
        padding-bottom: 0 !important;
        color: rgb(172, 168, 168);
      }
  }
}
.upload-img {
  &::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      /* image{
        vertical-align: middle;
      } */
      .tip {
        padding-bottom: 30px;
      }
    }
  }
}

.add_wrap {
  padding-top: 10px;
  padding-left: 23px;
}

.main_box {
  padding: 10px;
}
</style>
